<template>
	<div  > 
		
		<a-row  class='main'>
			<breadcrumbs v-if='!Global.currentDevice'></breadcrumbs>
			<div class='pt30'>
				<span  class='ft20 fontWeight  span_title'>{{AllData.introduce.title}}</span>  
				<ul  class='method_list  mt12'>
					<li style="font-size: 16px;"  v-for='(item,index) in AllData.introduce.content' :key='index'> <i class='method_list_head'></i>{{item}}</li> 
				</ul>
			</div> 
			<ul  class='card-list pt30'>
				<li  v-for='(item,index) in AllData.introduce.advantage' :key='index'>
					<div  class='card-list_title ' :class='item.class'>{{item.title}}</div>
					<div  class='list_title-small'>{{item.sim}}</div>
					<p>
						{{item.content}}
					</p>
				</li>
				<!-- <li >
					<div  class='card-list_title two'>优势2</div>
					<div  class='list_title-small'>加速资金周转</div>
					<p>货物运送至海外仓7日内，您可提前收回部分成本，缓解资金周转压力。</p>
				</li>
				<li >
					<div  class='card-list_title three'>优势3</div>
					<div  class='list_title-small'>海外仓免费仓储</div>
					<p>货物运送至我司在海外的合作仓库后，会有六个月的免费仓储期，六个月之内，您不必为您的货物支付仓储费用。</p>
				</li>
				<li >
					<div  class='card-list_title four'>优势4</div>
					<div  class='list_title-small'>随时查询海外仓储信息</div>
					<p>通过我司的供应链系统，您可随时查询您的订单信息，物流信息，海外仓库存信息；也可随时掌握货物动态，更精确的进行生产、备货；以及更自信的和客户进行谈判，获得更多的折扣及有利条件。</p>
				</li> -->
			</ul>
		</a-row>
		<a-row v-if='userlogin'>
			<a-row  class='bg-white'>
				<a-row class='main'>
					<div  class='pt30  modal_introduce   relative'>
						<span  class='ft20 fontWeight span_title'>{{AllData.modal.title}}</span> 
						<div v-if='!Global.currentDevice'> 
							<ul  class='financing_modal'  style="padding-top: 74px;">
								<li>
									<i  class='left_num'>1</i>
									<span class='left_top  top'>{{AllData.modal.one}}</span>
								</li>
								<li>
									<i  class='left_num'>2</i>
									<span class='left_top  bottom'>{{AllData.modal.two}}</span>
								</li>
								<li>
									<i  class='left_num'>3</i>
									<span class='left_top  top'>{{AllData.modal.three}}</span>
								</li>
								<li>
									<i  class='left_num'>4</i>
									<span class='left_top  bottom'>{{AllData.modal.four}}</span>
								</li>
								<li style="border-right:2px solid  #2E4E7E;"></li>
							</ul> 
							<ul  class='financing_modal'>
								<li>
									<i  class='left_num'>8</i>
									<span class='left_top  top'>{{AllData.modal.eight}}</span>
								</li>
								<li>
									<i  class='left_num'>7</i>
									<span class='left_top  bottom'>{{AllData.modal.seven}}</span>
								</li>
								<li>
									<i  class='left_num'>6</i>
									<span class='left_top  top'>{{AllData.modal.six}}</span>
								</li>
								<li>
									<i  class='left_num'>5</i>
									<span class='left_top  bottom'>{{AllData.modal.five}}</span>
								</li>
								<li></li>
							</ul> 
						</div>
						<div v-else>
							<ul  class='financing_modal'  style="padding-top: 60px;">
								<li>
									<i  class='left_num'>1</i>
									<span class='left_top  top'>{{AllData.modal.one}}</span>
								</li>
								<li>
									<i  class='left_num'>2</i>
									<span class='left_top  bottom'>{{AllData.modal.two}}</span>
								</li>
								<li style="border-right:2px solid  #2E4E7E;"></li>
							</ul> 
							<ul  class='financing_modal'> 
								<li  style="border-left:2px solid  #2E4E7E;">
									<i  class='left_num'>4</i>
									<span class='left_top  bottom'>{{AllData.modal.four}}</span>
								</li>
								<li>
									<i  class='left_num'>3</i>
									<span class='left_top  top'>{{AllData.modal.three}}</span>
								</li>
								<li></li>
							</ul> 
							<ul  class='financing_modal'>
								<li>
									<i  class='left_num'>5</i>
									<span class='left_top  top'>{{AllData.modal.five}}</span>
								</li>
								<li>
									<i  class='left_num'>6</i>
									<span class='left_top  bottom'>{{AllData.modal.six}}</span>
								</li>
								
								<li style="border-right:2px solid  #2E4E7E;"></li>
							</ul>
							<ul  class='financing_modal'>

								<li>
									<i  class='left_num'>8</i>
									<span class='left_top  bottom'>{{AllData.modal.eight}}</span>
								</li>
								<li>
									<i  class='left_num'>7</i>
									<span class='left_top  top '>{{AllData.modal.seven}}</span>
								</li>
								<li></li>
							</ul>
						</div>
						<img  :src='AllData.modal.imgsrc' width="1200"  class='absolute' style="bottom: -284px;left:0;" :style='{bottom:Global.currentDevice? "-60px":"-284px"}'>
					</div>
					<div  class='pt30'   :style="{marginTop: Global.currentDevice? '60px': '278px'}">
						<span  class='ft20 fontWeight span_title'>{{AllData.case.title}}</span> 
						<ul class='caseEg clear'>
							<li v-for='(item,index) in AllData.case.content' :key='index' :style="{background:index == 6? 'none':''}">{{item}}</li> 
						</ul>
					</div>
					<div  class='bg-white pt30'>
						<span  class='ft20 fontWeight span_title'>{{AllData.cost.title}}</span> 
						<div  class='mt20 pl18'>{{AllData.cost.content}}</div>
					</div>	
				</a-row>
			</a-row>
			<a-row  class='main'>
				<div  class='mt50'  >
					<span  class='ft20 fontWeight span_title'>{{AllData.file.title}}</span>
					<a-row class='mt28'>
						<a-col  :span='14'>
							<table class='mr20  requiredFile bg-white'>
								<tr>
									<td class='head' style="border-bottom:2px solid #f6f6f6;">{{AllData.file.company.title}}</td>
									<td width="64%" style="border-bottom:2px solid #f6f6f6;">
										<p ><span v-for='(item,index) in AllData.file.company.list' :key='index'>{{item}}<br/></span></p>
									</td>
								</tr>
								<tr>
									<td  class='head'>{{AllData.file.item.title}}</td>
									<td>
										<p ><span v-for='(item,index) in AllData.file.item.list' :key='index'>{{item}}<br/></span></p>
									</td>
								</tr>
							</table>
						</a-col>
						<a-col  :span='10' class='overHidden'>
							<img v-if='!Global.currentDevice' src='static/img/financing_bg1.jpg' width="474" height="290"  class='fr'>
						</a-col>
					</a-row>
				</div>	
				<div class='mt50'>
					<span  class='ft20 fontWeight span_title'>{{AllData.which.title}}</span>
					<a-row class='clear mt28'>
						<a-col  :span='14'>
							<table  class='mr20 bg-white lh-200 w-100' style="height: 288px;">
								<tr>
									<td :style="{padding: Global.currentDevice? '10px' : '0 80px'}" >
										<p ><span v-for='(item,index) in AllData.which.content' :key='index'>{{item}}<br/></span></p>
									</td>
								</tr>
							</table>
						</a-col>
						<a-col :span='10' class='overHidden'>
							<img  v-if='!Global.currentDevice' src='static/img/financing_bg2.jpg' width="474" height="290" class='fr'>
						</a-col>
					</a-row>
					
				</div> 
				<div class='link-button text-center'  :class='{mt50:!Global.currentDevice,mt20:Global.currentDevice}'>
					<a-col :span='12'>
						<button  class='method_button '><router-link  to='/eCommerce/overseas'>{{AllData.btn}}</router-link></button>
					</a-col>
					<a-col :span='12'>
						<button  class='method_button'><router-link  to='/contact_form'>{{AllData.btn2}}</router-link></button>
					</a-col> 
				</div>
			</a-row>
		</a-row>
		<div v-else class="loginButton_bg">
			<div  class='login_button cursor'  @click='loginshow()'>
				{{AllData.btn_detail}}
			</div>
		</div>
	</div>
</template>

<script >
import breadcrumbs  from '@/components/breadcrumbs'
export default {
	name:'financing_one',
	props:{
		language:Object
	},
	data(){
		return {
			
		}
	},
	created(){ 
	},
	methods:{
		loginshow(){
	         this.$store.commit("setloginFormShow",true)
	    },
	},
	computed:{
		userlogin(){
			return this.$store.state.token ? true:false
		},
		AllData(){
			return this.language.financing_one
		}
	},
	components:{
		breadcrumbs
	}
}
</script>

<style  scoped="scoped">

.main{width: 1200px;margin:0 auto;padding-bottom:50px;}

/*卡片介绍*/
.card-list {display: table;width: 103%;}
.card-list li{display: table-cell;width:25%; height: 330px;background: url(../assets/img/financing_bg.png) no-repeat ;padding: 30px 58px 30px 20px;margin-right: 20px;background-size: 89% 100%;} 
.card-list li p{line-height: 1.7;margin-top: 8px;color: #666;}
.card-list_title{padding-top: 76px;font-size: 20px;font-weight: 600; text-align: center;}
.card-list_title.one{background: url(../assets/img/adventure_1.png) no-repeat top center;}
.card-list_title.two{background: url(../assets/img/adventure_2.png) no-repeat top center;}
.card-list_title.three{background: url(../assets/img/adventure_3.png) no-repeat top center;}
.card-list_title.four{background: url(../assets/img/adventure_4.png) no-repeat top center;} 
.list_title-small{font-size: 16px;font-weight: 600;color:black;margin-top: 14px ;text-align: center;color: #2E4E7E}

/*融资流程图*/
.modal_introduce{padding-bottom: 180px;}
.financing_modal{display: table;width: 100%;}
.financing_modal li {display: table-cell; width: 20%;height: 155px; border-top:2px solid  #2E4E7E;position: relative;}
.financing_modal li .left_num{position: absolute; width: 24px;height: 24px;line-height: 24px;background: #2E4E7E;border-radius: 50%;color: #fff;text-align: center;right: 0;margin-right: -12px;top:-12px;z-index: 9;}
.financing_modal li .left_top{position: absolute;width:340px;text-align: center;right: -50%;margin-right: -58px;}
.financing_modal li .left_top.top{top:-42px;}
.financing_modal li .left_top.bottom{top:26px;} 

.requiredFile .head{text-align: center; font-size: 16px;font-weight: 600;color: #2E4E7E;border-right:2px solid #f6f6f6;}
.requiredFile p{line-height: 1.5;text-align: left;padding:29px 48px ;}

/*.link-button button{margin:0 216px;}*/

/*移动端适配*/
@media(max-width: 420px){   
	.main{width: 100%;padding:10px 20px;}  
	img{width: 100%}
	.span_title{font-size: 18px;line-height: 1.2}
	.card-list{padding-bottom: 54px;}
	.card-list li{float: left;width: 97%;padding: 10px;background-size: cover;margin-bottom: 20px;}

	.modal_introduce{padding: 10px 0;}
	.financing_modal li .left_top{width:200px;margin-right: -44px;}

	.requiredFile .head{padding: 0 20px;}
	.requiredFile p{padding: 29px 12px;}

	.link-button {text-align: center;}
	.link-button button{margin:0 0 10px;}
}
</style>